<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Two-Column Layout with Bootstrap</title>
    <!-- Bootstrap CSS from CDN -->
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
    <!-- Highlight.js CSS from CDN -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.4.0/styles/default.min.css" rel="stylesheet">
    <style>
        .left-column {
            background-color: #add8e6; /* 淡蓝色 */
            min-height: 100vh; /* 确保占满整个视口高度 */
        }
        .right-column {
            background-color: #ffffff; /* 白色 */
            min-height: 100vh; /* 确保占满整个视口高度 */
            padding: 20px;
        }
        .file-list {
            cursor: pointer;
        }
        .file-list:hover {
            background-color: #e0e0e0;
        }
        pre {
            white-space: pre-wrap; /* 保证内容换行 */
            text-align: left; /* 代码左对齐 */
            overflow-x: auto; /* 横向滚动 */
        }
    </style>
</head>
<body>
    <div class="container-fluid">
        <div class="row">
            <!-- Left Column (1/3 of the page) -->
            <div class="col-4 left-column">
                <h2 class="text-center">目录</h2>
                <ul id="file-list" class="list-group">
                    <!-- 文件列表将在这里加载 -->
                </ul>
            </div>
            <!-- Right Column (2/3 of the page) -->
            <div class="col-8 right-column">
                <h2 class="text-center">代码</h2>
                <pre id="file-content" class="hljs"><code>请选择左侧的文件以查看内容。</code></pre>
            </div>
        </div>
    </div>

    <!-- jQuery and Bootstrap JS from CDN -->
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <!-- Highlight.js JS from CDN -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.4.0/highlight.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const fileListElement = document.getElementById('file-list');
            const fileContentElement = document.getElementById('file-content');
            const codeElement = fileContentElement.querySelector('code');
            const repo = 'Felinus-Lee.github.io';
            const path = '图解Python数据结构与算法/第一章';
            const apiUrl = `https://api.github.com/repos/Felinus-Lee/${repo}/contents/${path}`;

            // 获取文件列表
            fetch(apiUrl)
                .then(response => response.json())
                .then(data => {
                    data.forEach(file => {
                        if (file.name.endsWith('.py') || file.name.endsWith('.ipynb')) {
                            const li = document.createElement('li');
                            li.className = 'list-group-item file-list';
                            li.textContent = file.name;
                            li.addEventListener('click', () => {
                                fetch(file.download_url)
                                    .then(response => response.text())
                                    .then(content => {
                                        // 显示代码并应用高亮
                                        codeElement.textContent = content;
                                        hljs.highlightBlock(codeElement); // 使用 highlightBlock 而不是 highlightElement
                                    });
                            });
                            fileListElement.appendChild(li);
                        }
                    });
                })
                .catch(error => console.error('Error fetching file list:', error));
        });
    </script>
</body>
</html>
